<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>欢迎使用CRM管理系统</title>
	<link rel="stylesheet" href="${basePath }/css/bootstrap.min.css"
		type="text/css" />
	<link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" />
	
	<script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${basePath }/My97/WdatePicker.js"></script>
	<style type="text/css">
	.navbar {
		margin-bottom: 0px;
	}
	
	.fieldset {
		position: absolute;
		margin-left: 290px;
		margin-top: 130px;
	}
	
	#btn {
		margin-left: 230px;
	}
	</style>
</head>
<body>

	<div class="navbar">
		<div class="navbar-inner">
			<div class="container">
				<a href="${basePath }/message" class="brand">凯盛CRM管理系统</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li><a href="${basePath }/message">最新动态</a>
						</li>
						<li><a href="${basePath }/contacts/list">联系人</a>
						</li>
						<li class="active"><a href="${basePath }/task/list">日程安排</a>
						</li>
						<li><a href="${basePath }/deal/list">业务机会</a>
						</li>						
					</ul>
					<ul class="nav pull-right">
						<li><a href="#">${user.username }</a>
						</li>
						<li class="divider-vertical">&nbsp;</li>
						<li><a href="${basePath }/user/info">账号设置</a>
						<li><a href="${basePath }/user/loginout">退出</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="content" class="container">
		<div class="span9">
			<ul class="breadcrumb" style="vertical-align:top">
				<li class="active">日程安排</li>				
			</ul>
			<div class="well">
				<table id="table">
					<c:forEach items="${todayTaskList}" var="task">
						<tr>
							<td style="width:15%"><span class="label label-success">今日安排</span>
							</td>
							<td style="width:65%">
								<div style="margin-left:20px">
									<strong>${task.title } — <c:choose>
											<c:when test="${task.complete }">完成</c:when>
											<c:otherwise>正在进行中...</c:otherwise>
										</c:choose> </strong><br /> 
									任务类型:<span class="typelabel" style="background-color:${task.taskType.color}">${task.taskType.type }</span><br/>
									<c:if test="${task.contacts.view != null }">
										联系人:<a href="${basePath }/contacts/detail?id=${task.contacts.id}">${task.contacts.name }</a><br />
									</c:if>
									负责人：${task.user.username }<br /> 任务期限：${task.startDate }—${task.endDate }<br /> 
									创建时间:${task.createTime }
								</div></td>
							<c:choose>
							<c:when test="${task.user.id eq user.id }">	
							<c:if test="${!task.complete }">
								<td><a href="${basePath }/task/complete?id=${task.id }"
									class="btn btn-info" style="width:30px;">完成</a>
								</td>
							</c:if>
							<td><a href="#myModal" rel="${task.id }" data-toggle="modal"
								class="btn btn-info callJson" style="width:30px;">修改</a>
							</td>
							</c:when>
							<c:otherwise>
								<td></td>
							</c:otherwise>
							</c:choose>	
						</tr>
					</c:forEach>
					<c:forEach items="${outTaskList }" var="task">
						<tr>
							<td style="width:25%"><span class="label label-warning">过期任务</span>
							</td>
							<td style="width:75%">
								<div style="margin-left:20px">
									<strong>${task.title }</strong><br />
									任务类型:<span class="typelabel" style="background-color:${task.taskType.color}">${task.taskType.type }</span><br /> 
									<c:if test="${task.contacts.view != null }">
										联系人:<a href="${basePath }/contacts/detail?id=${task.contacts.id}">${task.contacts.name }</a><br />
									</c:if>
									 负责人：${task.user.username }<br />
									任务期限：${task.startDate } — ${task.endDate }<br />
									创建时间:${task.createTime }
								</div></td>
							<c:choose>
								<c:when test="${task.user.id eq user.id }">	
								<c:if test="${!task.complete }">
									<td><a href="${basePath }/task/complete?id=${task.id }"
										class="btn btn-info" style="width:30px;">完成</a>
									</td>
								</c:if>
								<td><a href="#myModal" rel="${task.id }" data-toggle="modal"
									class="btn btn-info callJson" style="width:30px;">修改</a>
								</td>
								</c:when>
								<c:otherwise>
									<td></td>
								</c:otherwise>
							</c:choose>	
						</tr>
					</c:forEach>
					<c:forEach items="${futureTaskList }" var="task">
						<tr>
							<td style="width:20%"><span class="label label-info">明日安排</span>
							</td>
							<td style="width:65%">
								<div style="margin-left:20px">
									<strong>${task.title } </strong><br /> 
									任务类型：<span class="typelabel" style="background-color:${task.taskType.color}">${task.taskType.type }</span><br /> 
									<c:if test="${task.contacts.view != null }">
										联系人：<a href="${basePath }/contacts/detail?id=${task.contacts.id}">${task.contacts.name }</a><br />
									</c:if>
									负责人：${task.user.username }<br />
									任务期限：${task.startDate } — ${task.endDate }<br /> 
									创建时间：${task.createTime }
								</div>
							</td>
							<c:choose>
								<c:when test="${task.user.id eq user.id }">			
								<td><a href="#myModal" rel="${task.id }" data-toggle="modal"
									class="btn btn-info callJson" style="width:30px;">修改</a>
								</td>
								</c:when>
								<c:otherwise>
									<td></td>
								</c:otherwise>
							</c:choose>	
						</tr>
					</c:forEach>
				</table>
			</div>
		</div>
		<div class="span3" >
			<div class="btn-group" style="margin-bottom:20px;">
				<a href="${basePath }/task/task-new" class="btn">新建日程</a>
				<a href="${basePath }/task/taskType-new" class="btn">新建日程类型</a>
			</div>
			<div class="box well" style="padding-top:0px">				
				<div class="head">抓住时间</div>
	               <div style="margin-left:10px;margin-right:10px;margin-bottom:10px;">“谁有时间进行规划？”<br/>
				  无论有多忙，你都应该抽出时间进行规划。越是觉得自己没有时间，你越应该仔细地规划自己的时间。比如说你可以在每天开始或结束的时候抽出十
				  分钟来进行规划——你将因此得到数倍的回报。 </div>
			</div>
		</div>
	</div>
	<div class="modal hide" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>修改任务</h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal" action="${basePath }/task/edit-save"
				method="post" id="edit-form">
				<fieldset>
					<input type="hidden" id="edit-id" name="task.id">
					<input type="hidden" id="edit-createTime" name="task.createTime">
					<input type="hidden" id="edit-complete" name="task.complete">
					<div class="control-group" id="titleDiv">
						<label class="control-label">任务：</label>
						<div class="controls">
							<input type="text" id="title" name="task.title"><br />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="company">联系人：</label>
						<div class="controls">
							<select name="contactsId">
								<c:forEach var="contacts" items="${contactsList}">
									<c:choose>
										<c:when test="${contacts.id == task.contacts.id }">
											<option id="${contacts.id }" value="${contacts.id }" selected="selected">${contacts.name
												}</option>
										</c:when>
										<c:otherwise>
											<option id="${contacts.id }" value="${contacts.id }">${contacts.name }</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="company">负责人</label>
						<div class="controls">
							<select name="userId">
								<c:forEach var="user" items="${userList}">
									<c:choose>
										<c:when test="${user.id == task.user.id }">
											<option id="${user.id }" value="${user.id }" selected="selected">${user.username
												}</option>
										</c:when>
										<c:otherwise>
											<option id="${user.id }" value="${user.id }">${user.username }</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="company">类型</label>
						<div class="controls">
							<select name="taskTypeId" id="typeSelect">
								<c:forEach var="taskType" items="${TaskType}">
									<c:choose>
										<c:when test="${taskType == task.taskType.id }">
											<option id="${taskType.id }" value="${taskType.id }" selected="selected">${taskType.type}</option>
										</c:when>
										<c:otherwise>
											<option id="${taskType.id }" value="${taskType.id }">${taskType.type }</option>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</select> 
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">开始时间：</label>
						<div class="controls">
							<input type="text" id="d241" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="task.startDate"><br />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">结束时间：</label>
						<div class="controls">
							<input type="text" id="d242" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="task.endDate"><br />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="optionsCheckbox">是否所有人可见</label>
						<div class="controls">
							<label class="checkbox">
								<input id="alltrue" name="task.all" value="true" type="radio"> 是
							</label>
							<label class="checkbox">
								<input id="allfalse" name="task.all" value="false" type="radio"> 否
							</label>
						</div>
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal">关闭</a> 
			<a href="#" class="btn btn-info" id="submit-edit">保存</a>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".callJson").click(function(){
				var id = $(this).attr("rel");
				$.get("${basePath}/task-ajax/task-edit?id=" + id,function(task){
					$("#edit-complete").val(task.complete);
					$("#edit-createTime").val(task.createTime);
					$("#edit-id").val(task.id);
					$("#title").val(task.title);
					$("#" + task.contacts.id).attr("selected","selected");
					$("#" + task.user.id).attr("selected","selected");
					$("#d241").val(task.startDate);
					$("#d242").val(task.endDate);
					$("#" + task.taskType.id).attr("selected","selected");			
					if(task.all) {
						$("#alltrue").attr("checked","checked");
					}else{
						$("#allfalse").attr("checked","checked");
					};
				});
			}); 
			$("#title").focus(function(){
				$("#titleDiv").removeClass("error");
			});
			$("#title").blur(function(){
				if($("#title").val().trim() == "") {
					$("#titleDiv").addClass("error");
				}
			});
			$("#submit-edit").click(function(){
				if($("#title").val().trim() != ""){
					$("#edit-form").submit();
				}else{
					$("#titleDiv").addClass("error");
				}
			}); 
		});
	</script>
</body>
</html>